<template>
  <div class="layout">
    <Layout>
      <Header >
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo">
            微红包
          </div>
          <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="logo-yen" />
              充值总资金：{{GetUserInfo.total_money}}
            </MenuItem>
            <MenuItem name="2">
              <Icon type="logo-yen" />
              最近充值资金：{{GetUserInfo.lately_money}}
            </MenuItem>
            <MenuItem name="3">
              <Icon type="logo-yen" />
              消费资金：{{GetUserInfo.now_money}}
            </MenuItem>
            <MenuItem name="4">
              <Icon type="logo-yen" />
              当前资金：{{GetUserInfo.total_money-GetUserInfo.now_money}}
            </MenuItem>
            <!--'total_money' - 'now_money'-->
            <MenuItem name="5" :to="{path: '/'}">
              <Icon type="md-walk" />
              退出
            </MenuItem>
          </div>
        </Menu>
      </Header>

      <Layout>
        <Sider hide-trigger :style="{background: '#fff',height:allheight+'px'}">
          <Menu :theme="theme3" active-name="1" theme="light" width="auto" accordion>

            <MenuGroup title="产品中心">
              <MenuItem name="1" :to="{path: '/qrcode'}">
                <Icon type="logo-tux" />
                红包管理
              </MenuItem>
              <MenuItem name="2" :to="{path: '/payment'}">
                <i class="iconfont icon-zhifu"></i>
                支付产品
              </MenuItem>
              <MenuItem name="3" :to="{path: '/Operate'}">
                <i class="iconfont icon-yunyinggongju"></i>
                运营工具
              </MenuItem>
              <MenuItem name="4" :to="{path: '/Paymentextension'}">
                <i class="iconfont icon-xianjinzhifukuozhan"></i>
                支付扩展工具
              </MenuItem>
              <MenuItem name="5" :to="{path: '/capital'}">
                <i class="iconfont icon-main-fund0"></i>
                资金解决方案
              </MenuItem>
            </MenuGroup>

          </Menu>
        </Sider>
        <router-view></router-view>

      </Layout>
    </Layout>
  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'
    export default {
        props: {},
        components: {},
        data() {
            return {
              theme3: 'light',
              allheight:'',
              ContentBodyHeight:'',
            }
        },
        methods: {
          // GetCookies(){
          //
          //   this.$h.getCookie('userinfo');
          //   console.log(this.$h.getCookie('userinfo'));
          // }
        },
        watch: {},
        computed: {
          ...mapGetters([
            'GetUserInfo'
          ]),
        },
        created() {
          document.body.style.background = '#fcfcfc';
          this.allheight = window.screen.availHeight - 168;
          this.ContentBodyHeight = window.screen.availHeight - 272;
          this.$h.ContentBodyHeight(this.ContentBodyHeight);
        },
        mounted() {
          if(this.GetUserInfo.id){

          }else {
            this.$router.push({
              path: '/'
            })
          }
            //生命周期
        }
    }
</script>
<style scoped>
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    width:100%;
    height:100%;
  }
  .layout-logo{
    width: 120px;
    height: 50px;
    color: white;
    float: left;
    font-size: 16px;
  }

  .layout-nav{
    width: 60%;
    min-width: 900px;
    margin: 0 auto;
    margin-right: 20px;
  }
</style>
